<template>
  <div class="container" ref="box">
    <div class="form-container">
      <div class="camp-form" style="border-bottom: 3px solid #ededed; padding-bottom: 20px;">
        <div class="span-main">A检间隔:</div>
            <div class="span-second">
              <span>FH:</span>
              <el-input-number 
                v-model="idea_1.interv_num_A_FH"
                controls-position="right"
                size="mini"
                :step="100"
                :min="0"
                :max="20000">
              </el-input-number>
            </div>
            <div class="span-second">
              <span>FC:</span>
              <el-input-number 
                v-model="idea_1.interv_num_A_FC"
                controls-position="right"
                size="mini"
                :step="100"
                :min="0"
                :max="10000">
              </el-input-number>
            </div>
            <div class="span-second">
              <span>MO:</span>
              <el-input-number 
                v-model="idea_1.interv_num_A_MO"
                controls-position="right"
                size="mini"
                :step="1"
                :min="0"
                :max="100">
              </el-input-number>
            </div>
            <div class="span-main">C检间隔:</div>
            <div class="span-second">
              <span>FH:</span>
              <el-input-number 
                v-model="idea_1.interv_num_C_FH"
                controls-position="right"
                size="mini"
                :step="100"
                :min="0"
                :max="20000">
              </el-input-number>
            </div>
            <div class="span-second">
              <span>FC:</span>
              <el-input-number 
                v-model="idea_1.interv_num_C_FC"
                controls-position="right"
                size="mini"
                :step="100"
                :min="0"
                :max="10000">
              </el-input-number>
            </div>
            <div class="span-second">
              <span>MO:</span>
              <el-input-number 
                v-model="idea_1.interv_num_C_MO"
                controls-position="right"
                size="mini"
                :step="1"
                :min="0"
                :max="100">
              </el-input-number>
            </div>
            <div class="form-buttons">
              <el-button type="success" v-loading.fullscreen.lock="Loading1" element-loading-text="数据加载中" @click="upMTOP()" size="small">提交</el-button>
              <el-button type="success" size="small" :disabled="isChecked" @click="downMTOP()">导出MTOP表</el-button>
            </div>
      </div>
      <el-tabs value="first" :stretch="true">
        <el-tab-pane label="方案1" name="first">
          <div class="camp-form">
            <div class="span-main" style="margin-top: 0">最长时间:</div>
            <div class="span-second">
              <span>A检:</span>
              <el-input-number 
                v-model="idea_1.interv_max_A"
                controls-position="right"
                size="mini"
                :step="1"
                :min="1"
                :max="100">
              </el-input-number>
              <span>年</span>
            </div>
            <div class="span-second">
              <span>C检:</span>
              <el-input-number 
                v-model="idea_1.interv_max_C"
                controls-position="right"
                size="mini"
                :step="1"
                :min="1"
                :max="100">
              </el-input-number>
              <span>年</span>
            </div>
            <div class="span-main">时间间隔:</div>
            <div class="span-second">
              <span>A检:</span>
              <el-input-number 
                v-model="idea_1.interv_MO_A"
                controls-position="right"
                size="mini"
                :step="1"
                :min="1"
                :max="100">
              </el-input-number>
              <span>月</span>
            </div>
            <div class="span-second">
              <span>C检:</span>
              <el-input-number 
                v-model="idea_1.interv_MO_C"
                controls-position="right"
                size="mini"
                :step="1"
                :min="1"
                :max="100">
              </el-input-number>
              <span>月</span>
            </div>
            <div class="form-buttons">
              <el-button type="success" v-loading.fullscreen.lock="Loading2" element-loading-text="数据加载中" @click="changeData()" :disabled="isChecked" size="small">提交</el-button>
              <el-button type="success" @click="downWorkHourOne()" :disabled="isChecked_1" size="small">导出工时表</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="方案2" name="second">
          <div class="camp-form">
            <span class="span-main" style="margin-top: 0">最长时间:</span>
            <div class="span-second">
              <span>A检:</span>
              <el-input-number 
                v-model="idea_2.interv_max_A"
                controls-position="right"
                size="mini"
                :step="1"
                :min="1"
                :max="100">
              </el-input-number>
              <span>年</span>
            </div>
            <div class="span-second">
              <span>C检:</span>
              <el-input-number 
                v-model="idea_2.interv_max_C"
                controls-position="right"
                size="mini"
                :step="1"
                :min="1"
                :max="100">
              </el-input-number>
              <span>年</span>
            </div>
            <span class="span-main">时间间隔:</span>
            <div class="span-second">
              <span>A检:</span>
              <el-input-number 
                v-model="idea_2.interv_MO_A"
                controls-position="right"
                size="mini"
                :step="1"
                :min="1"
                :max="100">
              </el-input-number>
              <span>月</span>
            </div>
            <div class="span-second">
              <span>C检:</span>
              <el-input-number 
                v-model="idea_2.interv_MO_C"
                controls-position="right"
                size="mini"
                :step="1"
                :min="1"
                :max="100">
              </el-input-number>
              <span>月</span>
            </div>
            <div class="form-buttons">
              <el-button type="success" v-loading.fullscreen.lock="Loading2" element-loading-text="数据加载中" @click="changeData2()" :disabled="isChecked" size="small">提交</el-button>
              <el-button type="success" @click="downWorkHourTwo()" :disabled="isChecked_2" size="small">导出工时表</el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      
    </div>
    <div class="table-container">
      <bar-chart :key="chart_key1 + '1'" title="方案统计一" :x_data="x_data_1" :access_time="access_time_1" :work_time="work_time_1"></bar-chart>
      <bar-chart :key="chart_key2 + '2'" title="方案统计二" :x_data="x_data_2" :access_time="access_time_2" :work_time="work_time_2"></bar-chart>
      <div class="table-item">
        <table border="" cellspacing="0" cellpadding="0">
          <tr>
            <th colspan="2">分析区间</th>
            <th style="width: 200px">方案1</th>
            <th style="width: 200px">方案2</th>
            <th style="width: 200px" rowspan="3">差值</th>
          </tr>
          <tr>
            <th colspan="2">A检</th>
            <th>{{idea_1.interv_max_A * 12 / idea_1.interv_MO_A}}个</th>
            <th>{{idea_2.interv_max_A * 12 / idea_2.interv_MO_A}}个</th>
          </tr>
          <tr>
            <th colspan="2">C检</th>
            <th>{{idea_1.interv_max_C * 12 / idea_1.interv_MO_C}}个</th>
            <th>{{idea_2.interv_max_C * 12 / idea_2.interv_MO_C}}个</th>
          </tr>
          <tr>
            <th rowspan="4" style="width: 150px">A检工时</th>
            <th style="width: 150px">工作</th>
            <td>{{AworkSum_1}}</td>
            <td>{{AworkSum_2}}</td>
            <td>{{(AworkSum_1 - AworkSum_2).toFixed(2)}}</td>
          </tr>
          <tr>
            <th>接近</th>
            <td>{{AaccessSum_1}}</td>
            <td>{{AaccessSum_2}}</td>
            <td>{{(AaccessSum_1 - AaccessSum_2).toFixed(2)}}</td>
          </tr>
          <tr>
            <th>总</th>
            <td>{{ASum_1}}</td>
            <td>{{ASum_2}}</td>
            <td>{{(ASum_1 - ASum_2).toFixed(2)}}</td>
          </tr>
          <tr>
            <th>平均</th>
            <td>{{(ASum_1 / result.Awork.length).toFixed(2)}}</td>
            <td>{{(ASum_2 / result.Awork.length).toFixed(2)}}</td>
            <td>{{(ASum_1 / result.Awork.length - (ASum_2) / result.Awork.length).toFixed(2)}}</td>
          </tr>
          <tr>
            <th rowspan="4">C检工时</th>
            <th>工作</th>
            <td>{{CworkSum_1}}</td>
            <td>{{CworkSum_2}}</td>
            <td>{{(CworkSum_1 - CworkSum_2).toFixed(2)}}</td>
          </tr>
          <tr>
            <th>接近</th>
            <td>{{CaccessSum_1}}</td>
            <td>{{CaccessSum_2}}</td>
            <td>{{(CaccessSum_1 - CaccessSum_2).toFixed(2)}}</td>
          </tr>
          <tr>
            <th>总</th>
            <td>{{CSum_1}}</td>
            <td>{{CSum_2}}</td>
            <td>{{(CSum_1 - CSum_2).toFixed(2)}}</td>
          </tr>
          <tr>
            <th>平均</th>
            <td>{{((CSum_1) / result.Cwork.length).toFixed(2)}}</td>
            <td>{{((CSum_2) / result.Cwork.length).toFixed(2)}}</td>
            <td>{{((CSum_1) / result.Cwork.length - (CSum_2) / result.Cwork.length).toFixed(2)}}</td>
          </tr>
          <tr>
            <th rowspan="4">总检工时</th>
            <th>工作</th>
            <td>{{(AworkSum_1 + CworkSum_1).toFixed(2)}}</td>
            <td>{{(AworkSum_2 + CworkSum_2).toFixed(2)}}</td>
            <td>{{(AworkSum_1 + CworkSum_1 - AworkSum_2 - CworkSum_2).toFixed(2)}}</td>
          </tr>
          <tr>
            <th>接近</th>
            <td>{{(CaccessSum_1 + AaccessSum_1).toFixed(2)}}</td>
            <td>{{(CaccessSum_2 + AaccessSum_2).toFixed(2)}}</td>
            <td>{{(CaccessSum_1 + AaccessSum_1 - CaccessSum_2 - AaccessSum_2).toFixed(2)}}</td>
          </tr>
          <tr>
            <th>总</th>
            <td>{{(ASum_1 + CSum_1).toFixed(2)}}</td>
            <td>{{(ASum_2 + CSum_2).toFixed(2)}}</td>
            <td>{{(ASum_1 + CSum_1 - ASum_2 - CSum_2).toFixed(2)}}</td>
          </tr>
          <tr>
            <th>平均</th>
            <td>{{((ASum_1 + CSum_1) / (result.Cwork.length + result.Awork.length)).toFixed(2)}}</td>
            <td>{{((ASum_2 + CSum_2) / (result.Cwork.length + result.Awork.length)).toFixed(2)}}</td>
            <td>{{((ASum_1 + CSum_1) / (result.Cwork.length + result.Awork.length) - (ASum_2 + CSum_2) / (result.Cwork.length + result.Awork.length)).toFixed(2)}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
// import store from '../store/index'
// import { mapMutations } from 'vuex'
import { downloadMTOP, updateMTOP, updateWorkHourSchemeOne, updateWorkHourSchemeTwo, fileExist } from '../../api/modules/login'
import router from '../../router/index'
import BarChart from'./barChart'
import echarts from 'echarts'
export default {
  components: {
    BarChart
  },
  props: {
  },
  data () {
    return {
      userId: "",
      Loading1: false,
      Loading2: false,
      idea_1: {
        interv_num_A_FH: 1000,
        interv_num_A_FC: 250,
        interv_num_A_MO: 3,
        interv_num_C_FH: 12000,
        interv_num_C_FC: 5000,
        interv_num_C_MO: 36,
        interv_max_A: 20,
        interv_max_C: 2,
        interv_MO_A: 3,
        interv_MO_C: 3,
      },
      idea_2: {
        interv_max_A: 20,
        interv_max_C: 2,
        interv_MO_A: 3,
        interv_MO_C: 3,
      },

      isChecked: true,
      isChecked_1: true,
      isChecked_2: true,

      AaccessSum_1: 0,
      AworkSum_1: 0,
      CaccessSum_1: 0,
      CworkSum_1: 0,
      ASum_1: 0,
      CSum_1: 0,

      AaccessSum_2: 0,
      AworkSum_2: 0,
      CaccessSum_2: 0,
      CworkSum_2: 0,
      ASum_2: 0,
      CSum_2: 0,

      chart_key1: 1,
      x_data_1: [],
      access_time_1: [],
      work_time_1: [],

      chart_key2: 1,
      x_data_2: [],
      access_time_2: [],
      work_time_2: [],

      result: {
        Awork:[
          {
            number: 1,
            accessTime: 2,
            workTime: 2
          },{
            number: 2,
            accessTime: 3,
            workTime: 1
          },{
            number: 3,
            accessTime: 4,
            workTime: 2
          },{
            number: 4,
            accessTime: 5,
            workTime: 3
          },{
            number: 5,
            accessTime: 6,
            workTime: 1
          }
          ,{
            number: 6,
            accessTime: 6,
            workTime: 1
          }
          ,{
            number: 7,
            accessTime: 6,
            workTime: 7
          }
          ,{
            number: 8,
            accessTime: 8,
            workTime: 1
          }
          ,{
            number: 9,
            accessTime: 3,
            workTime: 2
          }
          ,{
            number: 10,
            accessTime: 7,
            workTime: 3
          }
        ],
        Cwork:[
          {
            number: 1,
            accessTime: 2,
            workTime: 4
          },{
            number: 2,
            accessTime: 1,
            workTime: 3
          }
        ]
      }
    }
  },
  watch: {
  },
  mounted () {
    // userId的检测
    if(! window.localStorage.getItem("userId")){  
      let id = parseInt(new Date().getTime()).toString()
      window.localStorage.setItem("userId", id)
      this.userId = id
    }
    else{
      this.userId = window.localStorage.getItem("userId")
    }
    this.checkFile()
  },
  methods: {
    checkFile(){
      fileExist(this.userId).then((res) => {
        if (res.status === 200) {
          if(res.data.errCode == 0){
            this.$store.commit("setFileOk", true)
          }
          else{
            console.log("erro")
            this.$store.commit("setFileOk", false)
            let third = {
              path: '/third'
            }
            router.push(third)
          }
        } else {
          console.log("error ok")
        }
      })
    },
    downMTOP () {
      //发送请求并更新数据
      //window.open('http://10.112.90.59:8081/ameco/downloadMTOP?id=' + this.userId)
      window.open('/ameco/downloadMTOP?id=' + this.userId)
    },
    downWorkHourOne () {
      //发送请求并更新数据
      //window.open('http://10.112.90.59:8081/ameco/downloadWorkHour?id=' + this.userId)
      window.open('/ameco/downloadWorkHourSchemeOne?id=' + this.userId)
    },
    downWorkHourTwo () {
      //发送请求并更新数据
      //window.open('http://10.112.90.59:8081/ameco/downloadWorkHour?id=' + this.userId)
      window.open('/ameco/downloadWorkHourSchemeTwo?id=' + this.userId)
    },
    upMTOP () {
      this.Loading1 = true
      this.isChecked = false
      let bodyJson = {
        fh_a: this.idea_1.interv_num_A_FH, fc_a: this.idea_1.interv_num_A_FC, mo_a: this.idea_1.interv_num_A_MO,
        fh_c: this.idea_1.interv_num_C_FH, fc_c: this.idea_1.interv_num_C_FH, mo_c: this.idea_1.interv_num_C_MO,
        }
      updateMTOP(bodyJson, this.userId).then((res) => {
        console.log(res)
        if (res.status === 200) {
          console.log("200 ok")
          this.Loading1 = false
          this.$message("计算完毕")
        } else {
          this.$message.error("error");
        }
      })
    },
    changeData () {
      this.Loading2 = true
      let bodyJson = {
        atime: {maxTime: this.idea_1.interv_max_A, minTime: this.idea_1.interv_MO_A},
	      ctime: {maxTime: this.idea_1.interv_max_C, minTime: this.idea_1.interv_MO_C}
      }
      updateWorkHourSchemeOne(bodyJson, this.userId).then((res) => {
        console.log(res)
        if (res.status === 200) {
          this.Loading2 = false
          console.log("200 ok")
          this.AaccessSum_1 = res.data.totalAAccessHour
          this.AworkSum_1 = res.data.totalAWorkHour
          this.ASum_1 = res.data.totalAHour
          this.CaccessSum_1 = res.data.totalCAccessHour
          this.CworkSum_1 = res.data.totalCWorkHour
          this.CSum_1 = res.data.totalCHour

          let listAll = []
          let Acount = res.data.awork.length
          let Ccount = res.data.cwork.length
          let count = Math.ceil(Acount / Ccount)
          for(let i = 1; i < Acount; i++){
            if(i % count == 0){
              let cdata = res.data.cwork[i / count - 1]
              cdata.number = cdata.number + "C"
              listAll.push(cdata)
            }
            let adata = res.data.awork[i - 1]
            adata.number = adata.number + "A"
            listAll.push(adata)
          }
          this.x_data_1 = listAll.map(item =>{
            return item.number
          })
          this.access_time_1 = listAll.map(item =>{
            return item.accessTime
          })
          this.work_time_1 = listAll.map(item =>{
            return item.workTime
          })
          this.chart_key1 ++;
          this.isChecked_1 = false
          this.isChecked_2 = true
        } else {
          this.$message.error("error");
        }
      })
    },
    changeData2 () {
      this.Loading2 = true
      let bodyJson = {
        atime: {maxTime: this.idea_2.interv_max_A, minTime: this.idea_2.interv_MO_A},
	      ctime: {maxTime: this.idea_2.interv_max_C, minTime: this.idea_2.interv_MO_C}
      }
      updateWorkHourSchemeTwo(bodyJson, this.userId).then((res) => {
        console.log(res)
        if (res.status === 200) {
          this.Loading2 = false
          console.log("200 ok")
          this.AaccessSum_2 = res.data.totalAAccessHour
          this.AworkSum_2 = res.data.totalAWorkHour
          this.ASum_2 = res.data.totalAHour
          this.CaccessSum_2 = res.data.totalCAccessHour
          this.CworkSum_2 = res.data.totalCWorkHour
          this.CSum_2 = res.data.totalCHour

          let listAll = []
          let Acount = res.data.awork.length
          let Ccount = res.data.cwork.length
          let count = Math.ceil(Acount / Ccount)
          for(let i = 1; i < Acount; i++){
            if(i % count == 0){
              let cdata = res.data.cwork[i / count - 1]
              cdata.number = cdata.number + "C"
              listAll.push(cdata)
            }
            let adata = res.data.awork[i - 1]
            adata.number = adata.number + "A"
            listAll.push(adata)
          }

          this.x_data_2 = listAll.map(item =>{
            return item.number
          })
          this.access_time_2 = listAll.map(item =>{
            return item.accessTime
          })
          this.work_time_2 = listAll.map(item =>{
            return item.workTime
          })
          this.chart_key2 ++;
          this.isChecked_2 = false
          this.isChecked_1 = true
        } else {
          this.$message.error("error");
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.table-container{
  padding-top: 20px;
  margin-left: 260px;
}
.table-item table{
  margin-left: 100px;
  width: 75%;
}
.form-container{
  position: absolute;
  width: 240px;
  height: 150%;
  border-right: gray 1px solid;
}
.camp-form{
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  padding-left: 35px;
  font-size: 12px;
}
.span-second span{
  display: inline-block;
  width: 30px;
}
.camp-form span{
  margin-top: 12px;
  margin-bottom: 3px;
}
.camp-form .span-main{
  margin-top: 12px;
  margin-bottom: 3px;
}
.camp-form .span-main:first-child{
  margin-bottom: 3px;
}
.camp-form .el-input-number{
  width: 120px;
  margin-left: 0px;
}
.form-buttons{
  position: relative;
  left: -10px;
  width: 100%;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.form-buttons .el-button{
  width: 80px;
  padding: 10px 0;
}
.form-buttons .el-dropdown{
  margin-left: 10px;
}
.table-item{
  width: 100%;
}
.table-item th{
  background-color: #dedede;
}
.table-item td{
  padding-left: 5px;
}
</style>
